<template>
    <div >
        <v-dialog
            ref="checkRef"
            title="核算"
            :show.sync="dialogVisible"
            :modalAppendToBody="false"
            @beforeClose="beforeClose"
            width="1200px">
            <div class="card-box">
                <div>租赁押金</div>
                <el-table :data="tableData1" align="center">
                    <el-table-column prop="costMonth" label="账单月份" sortable width="180"></el-table-column>
                    <el-table-column prop="roomCode" label="物业名称" sortable width="180"></el-table-column>
                    <el-table-column prop="chargeProjectName" label="收费项目">
                        <template >
                            租赁押金
                        </template>
                    </el-table-column>
                    <el-table-column prop="costPeriodStart" label="费用周期">
                        <template slot-scope="scope">
                            {{scope.row.costPeriodStart}}至{{scope.row.costPeriodEnd}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="receivableDate" label="应收日期"></el-table-column>
                    <el-table-column prop="receivableMoney" label="应收金额(元)"></el-table-column>
                </el-table>
                <div>租金</div>
                <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="receivableId" border default-expand-all
                    :tree-props="{children: 'receivableList', hasChildren: 'hasChildren'}">
                    <el-table-column prop="costMonth" label="账单月份" sortable width="180"></el-table-column>
                    <el-table-column prop="projectName" label="物业名称" sortable width="180"></el-table-column>
                    <el-table-column prop="chargeProjectName" label="收费项目"></el-table-column>
                    <el-table-column prop="costPeriodStart" label="费用周期">
                        <template slot-scope="scope">
                            {{scope.row.costPeriodStart}}至{{scope.row.costPeriodEnd}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="receivableDate" label="应收日期"></el-table-column>
                    <el-table-column prop="receivableMoney" label="应收金额(元)"></el-table-column>
                </el-table>

            </div>
            <div><p>注：确认合同准确无误，点击审核通过生成合同应收；如果合同有误，点击退回租赁合同。</p></div>
            <span slot="foot">
                <el-button size="small" @click="returned">退回合同</el-button>
				<el-button size="small" @click="dialogVisible = false">取消</el-button>
				<el-button size="small" type="primary" @click="account">审核通过</el-button>
            <!--<el-button @click="dialogVisible = false">取 消</el-button>
            <el-button @click="commit">提 交</el-button>-->
          </span>
        </v-dialog>
    </div>
</template>

<script>
import engineerList from '@/components/engineer-list'
import {check,checkSubmit,generateProFee} from '../../../api/finance-collection-receivable'

import BaseLoad from '@/assets/vue-mixin/BaseLoad'
import {mapState} from 'vuex'
export default {
    mixins: [BaseLoad],
    components: { engineerList},
    data() {
        return {
            dialogVisible: false,
            tableData: [],
            tableData1:[],
            form: {
                remarks: "",
                rentContractId: "",
            },
            dialogVisible1: false
        }
    },

    methods: {
        show(item) {
            this.dialogVisible = true
            setTimeout(() => {
                if(item){
                    //console.log(item)
                    this.form.rentContractId = item.rentContractId
                    check(item.rentContractId).then(res=>{
                        // this.construction=res.data.data
                        this.tableData=res.data.data
                    });
                    generateProFee(item.rentContractId).then(res=>{
                        // this.construction=res.data.data
                        this.tableData1=res.data.data
                    });
                }
            }, 200)

        },
        /*commit() {
            this.$refs.editForm.validate(valid => {

            })
        },
        beforeUpload() {
            this.loadAction('请稍等...')
        },
        receive() {
            this.$message('合同已确认接收！');
            this.dialogReceiveVisible = false;
            this.flag = true;
            this.btnText = "已接收";
            this.operText = "核算";
            console.log(this.flag);
        },*/
        returned() {
            this.$prompt('请填写退回原因', '退回原因', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /\S/,
                inputErrorMessage: '退回原因不能为空'
            }).then(({ value }) => {
                this.form.remarks = value
                checkSubmit(this.form).then(resp => {
                    if (resp.data.data) {
                        this.$message({
                            type: 'success',
                            message: '合同已退回经营部！'
                        });
                        this.dialogVisible = false;
                        this.$emit('resetList')
                        this.$emit('getTabListData')
                        this.$forceUpdate()
                    } else {
                        this.err('操作失败')
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        account() {
            // console.log(this.$refs.checkRef)
            this.dialogVisible1 = true
            this.$confirm('是否确定合同数据已通过审核?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.loadAction('请稍等...')
                checkSubmit(this.form).then(resp => {
                    if (resp.data.data) {
                        this.$message({
                            type: 'success',
                            message: '合同数据已审核通过！'
                        });
                        this.dialogVisible = false;
                        this.$emit('resetList')
                        this.$emit('getTabListData')
                        this.loadClose()
                    } else {
                        this.err('操作失败')
                        this.loadClose()
                    }
                })
            }).catch((e) => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        beforeClose(done) {
            done();
        }
    }
}
</script>

<style lang='scss' scoped>


@include data-title();
@include info-list(2);
@include formWrap(3);
</style>
